<!-- 房屋管理 -->
<template>
  <div>
    <div class="header" style="background-color: #fff;">
      <div style="width: 100%; background: #fff; height: 40px">
        <div
          style="
            width: 50%;
            float: left;
            font-size: 16px;
            padding-left: 20px;
            line-height: 37px;
            font-weight: bold;
          "
          ><home-outlined two-tone-color="#eb2f96" /><span style="padding: 0px 10px">
            {{ title
            }}<span
              style="display: inline-flex; align-items: center; gap: 4px"
              v-show="alarmTitle"
              :v-tooltip="alarmTitleName"
            >(
              <svg viewBox="64 64 896 896" style="width: 1em; height: 1em; margin-right: 4px">
                <!-- Outer circle with pulsating animation -->
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  fill="#FF0000"
                  style="animation: pulse 1.5s infinite; opacity: 0.8"
                />
                <circle cx="512" cy="512" r="300" fill="#FF0000" />
                <path
                  d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  fill="#FFFFFF"
                />
                <circle cx="350" cy="350" r="80" fill="#FFFFFF" opacity="0.2" />
              </svg>-{{alarmTitleName}}) </span></span
        ></div>
        <div
          style="
            width: 30%;
            float: right;
            font-size: 16px;
            padding-left: 20px;
            line-height: 37px;
            text-align: right;
            padding-right: 20px;
          "
          ><a style="color: blue" @click="getBack"
            ><arrow-left-outlined two-tone-color="#eb2f96" style="padding: 0px 10px" />返回上一页</a
          ></div
        >
      </div>
      <a-card style="width: 100%; margin-bottom: 10px;">
        <table v-for="item in houseInfo" :key="item" :loadding="loadding" class="gridtable">
          <tbody>
          <tr>
            <td style="background-color: #fafafa;">户主姓名</td>
            <td style="width: 320px">{{ item.hzxm }}</td>
            <td style="background-color: #fafafa;">房屋编号</td>
            <td>{{ item.fwbh }}</td>
          </tr>
          <tr>
            <td style="background-color: #fafafa;">总居住人数(人)</td>
            <td>{{ item.jzrks }}</td>
            <td style="background-color: #fafafa;">租住人数(人)</td>
            <td>{{ item.zzrs }}</td>
          </tr>
          <tr>
            <td style="background-color: #fafafa;">房屋层数(层)</td>
            <td>{{ item.cs }}</td>
            <td style="background-color: #fafafa;">房间数量(个)</td>
            <td>{{ item.fjsl }}</td>
          </tr>
          <tr>
            <td style="background-color: #fafafa;">出租房间数量(个)</td>
            <td>{{ item.jzfjs }}</td>
            <td style="background-color: #fafafa;">安全出口数量 (个)</td>
            <td>{{ item.jzscxyaqcksl }}</td>
          </tr>
          <tr>
            <td style="background-color: #fafafa;">疏散楼梯数量(个)</td>
            <td>{{ item.jzxyssltsl }}</td>
            <td style="background-color: #fafafa;">建筑面积 (平方米)</td>
            <td>{{ item.jzscmj }}</td>
          </tr>
          </tbody>
        </table>
      </a-card>
      <a-card>
        <div class="card-container" style="margin: 0px 10px;">
          <a-tabs v-model:activeKey="activeKey" type="card">
            <a-tab-pane key="1" :tab="zctabname">
              <a-table
                :columns="zc_computedTableColumn"
                :data-source="zc_computedCheckTableDataList"
                :page-size-options="pageSizeOptions"
                :loading="loading"
                bordered
                :pagination="false"
                size="middle"
                :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
              />
              <div class="pagination">
                <a-pagination
                  show-size-changer
                  v-model:current="pageIndex"
                  v-model:pageSize="pageSize"
                  :total="total"
                  @show-size-change="onShowSizeChange"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="jctabname">
              <a-table
                :columns="jc_computedTableColumn"
                :data-source="jc_computedCheckTableDataList"
                :page-size-options="pageSizeOptions"
                :loading="loading"
                bordered
                :pagination="false"
                size="middle"
                :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
              />
              <div class="pagination">
                <a-pagination
                  show-size-changer
                  v-model:current="pageIndex"
                  v-model:pageSize="pageSize"
                  :total="total"
                  @show-size-change="onShowSizeChange"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" :tab="jztabname">
              <a-table
                :columns="hy_computedTableColumn"
                :data-source="hy_computedCheckTableDataList"
                :page-size-options="pageSizeOptions"
                :loading="loading"
                bordered
                :pagination="false"
                size="middle"
                :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
              />
              <div class="pagination">
                <a-pagination
                  show-size-changer
                  v-model:current="pageIndex"
                  v-model:pageSize="pageSize"
                  :total="total"
                  @show-size-change="onShowSizeChange"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="4" :tab="qjtabname">
              <a-table
                :columns="hy_computedTableColumn"
                :data-source="hy_computedCheckTableDataList"
                :page-size-options="pageSizeOptions"
                :loading="loading"
                bordered
                :pagination="false"
                size="middle"
                :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
              />
              <div class="pagination">
                <a-pagination
                  show-size-changer
                  v-model:current="pageIndex"
                  v-model:pageSize="pageSize"
                  :total="total"
                  @show-size-change="onShowSizeChange"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="5" :tab="sjtabname">
              <a-table
                :columns="hy_computedTableColumn"
                :data-source="hy_computedCheckTableDataList"
                :page-size-options="pageSizeOptions"
                :loading="loading"
                bordered
                :pagination="false"
                size="middle"
                :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
              />
              <div class="pagination">
                <a-pagination
                  show-size-changer
                  v-model:current="pageIndex"
                  v-model:pageSize="pageSize"
                  :total="total"
                  @show-size-change="onShowSizeChange"
                />
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </div>
    <VillageDetail
      v-model:vvvisible="vvvisible"
      title="抽屉标题"
      :width="1500"
      :detailTableHeight="detailTableHeight"
      :vclosable="true"
      :vdestroyOnClose="true"
      :data="detaileData"
      :detailParams="detailParams"
      :currentTitle="currentTitle"
      :loadding="loadding"
      @close="handleVillageDetailClose"
    />
  </div>
</template>
<script lang="ts" setup>
  import moment from 'moment';
  import dayjs from 'dayjs';
  import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import { getCheckInfoApi, getCheckHousrInfoApi, getHcHousrInfoApi } from '/@/api/demo/system';
  import { hourseinfo } from '/@/api/demo/api';
  import VillageDetail from '/@/views/utils/component/detail.vue';
  import { useCheckStore } from '/@/store/modules/checkStore';
  let userInfo = ref<any>(null);
  const vvvisible = ref(false);
  const loadding = ref(false);
  let detailParams = ref({}); // 详情参数
  let detaileData = ref<any[]>([]); //详细
  let currentTitle = ref({});
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(10);
  const activeKey = ref('1');
  let loading = ref(false);
  let houseInfo = ref<any>([]);
  const zctabname = ref<string>('自查记录');
  const jctabname = ref<string>('检查记录');
  const jztabname = ref<string>('乡镇核验记录');
  const qjtabname = ref<string>('区级核验记录');
  const sjtabname = ref<string>('市级核验记录');
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);

  // 使用 useRouter 创建一个 router 实例
  const route = useRoute();
  const router = useRouter();
  const {
    xzq,
    town,
    village,
    hzxm,
    fwbh,
    remark,
    startTime,
    endTime,
    roletype,
    txtKeyWord,
    xzqdm,
    cs,
  } = route.query;
  let title = xzq + '-' + town + '-' + village + '-' + hzxm + '-' + fwbh;
  const alarmTitle = ref<boolean>(false);
  const alarmTitleName = ref<string>('');
  let zcTableSource = ref<any>([]);
  let jcTableSource = ref<any>([]);
  let hyTableSource = ref<any>([]);
  let total = ref(0);
  const zc_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'address' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '自查时间',
      dataIndex: 'pcsj',
      key: 'pcsj',
      align: 'center',
      width: 100,
    },
    {
      title: '自查详情',
      dataIndex: 'cz',
      key: 'cz',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            console.log('点击事件');
            getZcDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
  ];
  const jc_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'address'},
	    ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '检查时间',
      dataIndex: 'pcsj',
      key: 'pcsj',
      align: 'center',
      width: 100,
    },
	{
      title: '检查人员',
      dataIndex: 'create_name',
      key: 'create_name',
      align: 'center',
      width: 100,
    },
    {
      title: '双通道是否合格',
      dataIndex: 'jsrysstd',
      key: 'jsrysstd',
      align: 'center',
      width: 100,
    },
    {
      title: '检查详情',
      dataIndex: 'cz',
      key: 'cz',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            console.log('点击事件');
            getJcDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
  ];

  const hy_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 100,
      scopedSlots: { customRender: 'address'},
      ellipsis: true, //需ant版本为1.5及以上
    },
    {
      title: '核验时间',
      dataIndex: 'pcsj',
      key: 'pcsj',
      align: 'center',
      width: 100,
    },
    {
      title: '核验人员',
      dataIndex: 'create_name',
      key: 'create_name',
      align: 'center',
      width: 100,
    },
    {
      title: '双通道是否合格',
      dataIndex: 'jsrysstd',
      key: 'jsrysstd',
      align: 'center',
      width: 100,
    },
    {
      title: '核验详情',
      dataIndex: 'cz',
      key: 'cz',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            console.log('点击事件', row);
            if (row.yhly === 4) {
              getJzDetailData(row, index, column, isNoHzyh, isNoZero);
            } else if (row.yhly === 3) {
              getQjDetailData(row, index, column, isNoHzyh, isNoZero);
            } else if (row.yhly === 2) {
              getSjDetailData(row, index, column, isNoHzyh, isNoZero);
            }
          },
        };
      },
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const zc_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = zc_columns;
    return newColumn;
  });
  const zc_computedCheckTableDataList = computed(() => {
    return zcTableSource.value;
  });
  // 计算属性，用于实时更新数据到页面上
  const jc_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = jc_columns;
    return newColumn;
  });
  const jc_computedCheckTableDataList = computed(() => {
    return jcTableSource.value;
  });

  // 计算属性，用于实时更新数据到页面上
  const hy_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = hy_columns;
    return newColumn;
  });
  const hy_computedCheckTableDataList = computed(() => {
    return hyTableSource.value;
  });
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const getDataInfo = async (fwbh: any) => {
    var parms = { fwbh: fwbh };
    hourseinfo(parms)
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
      console.log('测试',remark)
    if (remark != '' && remark != null && remark != 'null') {
       console.log('测试',remark)
      alarmTitle.value = true;
      alarmTitleName.value = remark;
    }else
    {
       alarmTitle.value = false;
    }
  };
  //自查记录
  const getRecordTableData = async () => {
    console.log('自查记录', fwbh);
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      fwbh: fwbh,
    };
    loading.value = true;
    let res = await getCheckInfoApi(params);
    loading.value = false;
    let list = res.items;
    zcTableSource.value = list;
    total.value = res.total;
    zctabname.value = '自查记录(' + res.total + ')';
  };
  //检查记录
  const getCheckRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      fwbh: fwbh,
    };
    loading.value = true;
    let res = await getCheckHousrInfoApi(params);
    loading.value = false;
    let list = res.items;
    jcTableSource.value = list;
    total.value = res.total;
    jctabname.value = '检查记录(' + total.value + ')';
  };

  //街镇记录
  const getJzRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      fwbh: fwbh,
      jcly: '4',
    };
    loading.value = true;
    let res = await getHcHousrInfoApi(params);
    loading.value = false;
    let list = res.items;
    hyTableSource.value = [];
    hyTableSource.value = list;
    total.value = res.total;
    jztabname.value = '乡镇核验记录(' + res.total + ')';
  };
  //区级记录
  const getQjRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      fwbh: fwbh,
      jcly: '3',
    };
    loading.value = true;
    let res = await getHcHousrInfoApi(params);
    loading.value = false;
    var list = res.items;
    console.log('区级', list);
    hyTableSource.value = [];
    hyTableSource.value = list;
    total.value = res.total;
    qjtabname.value = '区级核验记录(' + res.total + ')';
  };
  //市级记录
  const getSjRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      fwbh: fwbh,
      jcly: '2',
    };
    loading.value = true;
    let res = await getHcHousrInfoApi(params);
    loading.value = false;
    let list = res.items;
    hyTableSource.value = [];
    hyTableSource.value = list;
    total.value = res.total;
    sjtabname.value = '市级核验记录(' + res.total + ')';
  };

  //自查详细情况
  const getZcDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        id: row.id,
      };
      console.log('****************row****************', row);
      detailParams.value = params;
      let current: any = {
        title: xzq + '-' + town + '-' + village + '-' + hzxm + '【' + row.pcsj + '】',
        town: town,
        village: village,
        xzq: xzq,
        id: row.id,
        fwbh: row.fwbh,
        category: '自查',
      };
      detailParams.value = params;
      console.log('*******参数*************', current);
      currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  const getJcDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
      };
      detailParams.value = params;
      let current: any = {
        title: xzq + '-' + town + '-' + village + '-' + hzxm + '【' + row.pcsj + '】',
        xzq: row.xzq,
        town: town,
        village: village,
        id: row.id,
        fwbh: row.fwbh,
        category: '检查',
      };
      console.log('*******参数*************', current);
      currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  const getJzDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
      };
      detailParams.value = params;
      let current: any = {
        title: xzq + '-' + town + '-' + village + '-' + hzxm + '【' + row.pcsj + '】',
        xzq: row.xzq,
        town: town,
        village: village,
        id: row.id,
        fwbh: row.fwbh,
        category: '乡镇核验',
      };
      console.log('*******参数*************', current);
      currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  const getQjDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
      };
      console.log('*******参数*************', row);
      detailParams.value = params;
      let current: any = {
        title: xzq + '-' + town + '-' + village + '-' + hzxm + '【' + row.pcsj + '】',
        xzq: row.xzq,
        town: town,
        village: village,
        id: row.id,
        fwbh: row.fwbh,
        category: '区级核验',
      };
      console.log('*******参数*************', current);
      currentTitle.value = current;
      showDeatailDrawer();
    }
  };
  const getSjDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: any = {
        town: row.town,
      };
      detailParams.value = params;
      let current: any = {
        title: xzq + '-' + town + '-' + village + '-' + hzxm + '【' + row.pcsj + '】',
        xzq: row.xzq,
        town: town,
        village: village,
        id: row.id,
        fwbh: row.fwbh,
        category: '市级核验',
      };
      console.log('*******参数*************', current);
      currentTitle.value = current;
      showDeatailDrawer();
    }
  };

  // 打开抽屉
  function showDeatailDrawer() {
    vvvisible.value = true;
    loadding.value = true;
  }

  const handleVillageDetailClose = () => {
    emit('close');
    pageIndex.value = 1;
    pageSize.value = 15;
    vvvisible.value = false;
  };
  const getBack = () => {
    router.go(-1); // 返回上一页
  };
  watch(activeKey, () => {
    if (activeKey.value === '1') {
      getRecordTableData();
    } else if (activeKey.value === '2') {
      getCheckRecordTableData();
    } else if (activeKey.value === '3') {
      getJzRecordTableData();
    } else if (activeKey.value === '4') {
      console.log(activeKey.value);
      getQjRecordTableData();
    } else if (activeKey.value === '5') {
      getSjRecordTableData();
    }
    console.log('当前选中的标签的 key:', activeKey.value);
  });
  const onShowSizeChange = () => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight - 330;
      tableHeight.value = window.innerHeight;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    //getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    if (activeKey.value == '1') {
      getRecordTableData();
    }
    //getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******房屋自查、核查记录******'); 
    getDataInfo(fwbh + '');
    getRecordTableData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
<style>
  .ant-tabs {
    width: 100% !important;
  }
  .ant-card-body {
    padding: 10px 15px !important;
  }
  table.gridtable {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #f0f0f0;
    border-collapse: collapse;
    width: 99%;
    margin: 10px 10px;
  }

  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #f0f0f0;
    background-color: #dedede;
  }

  table.gridtable td {
    border-width: 0.5px;
    padding: 8px;
    border-style: solid;
    border-color: #d0d0d0;
    background-color: #ffffff;
    font-size: 15px;
    padding: 10px 10px;
  }
</style>
